<template>
    <div class="container">
        <div class="content1" v-show="showBtn">
            <div class="time">{{date}}</div>
            <button class="loginBtn" @click="showBtn=!showBtn">Login</button>
        </div>
        <div class="content2" v-show="!showBtn">
            <el-form :model="ruleForm2" :rules="rules2"
                     status-icon
                     ref="ruleForm2"
                     label-position="left"
                     label-width="0px"
                     class="form2">
                <h3 style="margin-top: 50px">系统登录</h3>
                <el-form-item prop="username">
                    <el-input type="text"
                              v-model="ruleForm2.username"
                              auto-complete="off"
                              placeholder="用户名"
                    ></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password"
                              v-model="ruleForm2.password"
                              auto-complete="off"
                              placeholder="密码"
                    ></el-input>
                </el-form-item>
                <el-checkbox
                        v-model="checked"
                        class="rememberme"
                >记住密码
                </el-checkbox>
                <el-form-item style="text-align: center">
                    <el-button type="primary"
                               style="width: 100px;background: linear-gradient(to right,#44739F,#E2D9DF);border: 0"
                               @click="handleSubmit" :loading="logining">登录
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                showBtn: true,
                date: 'loading',//时间
                timer: null,//事件的定时器id
                logining: false,
                ruleForm2: {
                    username: 'admin',
                    password: '123456',
                },
                rules2: {
                    username: [{required: true, message: 'please enter your account', trigger: 'blur'}],
                    password: [{required: true, message: 'enter your password', trigger: 'blur'}]
                },
                checked: false
            }
        },
        mounted() {
            this.timer = setInterval(() => {
                let today = new Date()
                let h = today.getHours()
                let m = today.getMinutes()
                this.date = h + ':' + m
            }, 1000)
        },
        methods: {
            handleSubmit(event) {
                console.log(event)
                this.$refs.ruleForm2.validate((valid) => {
                    if (valid) {
                        this.logining = true;
                        this.$axios.post('/customer/login', {}).then((data) => {
                            this.logining = false;
                            this.$router.push({path: '/default'})
                        }).catch((error) => {
                            console.log("error");
                        })
                        // this.$axios.get('/user/login?username='+this.ruleForm2.username+'&password='+this.ruleForm2.password).then((data)=>{
                        // 	//在这里需要使用箭头函数，保证我们的this依旧指向原想的vue实例
                        // 	//进入到这一步只能表示登录请求发送成功
                        // 	//验证结果要看data里面的code
                        // 	//100---成功
                        // 	//200---失败
                        // 	this.$alert(data.data.data.msg, '老肖的提示', {
                        // 	    confirmButtonText: '确定'
                        // 	});
                        // 	if(data.data.code==100){
                        // 		//this.logining用来处理那个加载的小图标
                        // 		this.logining = false;
                        // 		this.$router.push({path:'/default'})
                        // 	}
                        // 	else{
                        // 		this.logining = false;
                        // 	}
                        // }).catch((error)=>{
                        // 	console.log(error)
                        // 	this.$alert('网络请求问题，联系管理员修复', '老肖的提示', {
                        // 	    confirmButtonText: '确定'
                        // 	});
                        // })
                    } else {
                        console.log('error submit!');
                        return false;
                    }
                })
            }
        },
        beforeDestroy() {
            if (this.timer) {
                clearInterval(this.timer)
            }
        }
    };
</script>

<style scoped>
    .container {
        width: 100%;
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        background: url("../assets/images/bg2.jpg") center center / cover no-repeat fixed;
        position: relative;
    }

    .container > .content1 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 10;
        margin-top: 100px;
    }

    .content1 > .time {
        font-size: 50px;
        color: white;
    }

    .container > .content1 > .loginBtn {
        margin-top: 50px;
        width: 400px;
        height: 40px;
        border-radius: 20px;
        font-size: 18px;
        border: 0;
        opacity: .8;
    }

    .container > .content1 > .loginBtn:hover {
        width: 500px;
        transition: all 1s;
        opacity: 1;
        backdrop-filter: blur(0px);
    }

    .container > .content2 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: white;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        /*backdrop-filter: blur(20px);*/
        animation: bgMove .5s;
        animation-timing-function: linear;
        animation-fill-mode: forwards;
    }
    @keyframes bgMove {
        from{
            backdrop-filter: blur(0);
        }
        to{
            backdrop-filter: blur(20px);
        }
    }
    .form2 {
        width: 350px;
        color: white;
        border: 1px solid white;
        border-radius: 10px;
        padding: 20px 30px;
    }

    .form2 > * {
        margin-bottom: 30px;
    }

    .form2 > h3 {
        text-align: center;
    }
</style>
